<template>
  <div class="page_head move">
    <div class="head_box">
      <div class="search">
        <div class="user_info">
          <div >
            <img :src="userInfo&&userInfo.photoUrl?userInfo.photoUrl:'../../assets/img/common/avatar.png'">
          </div>
          <p>
            <span>{{userInfo&&userInfo.username?userInfo.username:'admin'}}</span>
            <span v-if="userInfo.type===3&&wareHouse&&wareHouse.length>0">({{wareHouse[0].name}}仓管)</span>
          </p>
        </div>
      </div>
      <div class="set">
        <div class="out_box">
          <a @click="dropOut">退出</a>
          <div class="set_tip">
            <a>设置</a>
              <div class="menu_box">
                <router-link :to="{path:'/sys/pwd'}">修改密码</router-link>
                <a @click="userWx(1)" v-if="userType == 1 || userType == 3 || userType == 4 || userType == 5 || userType == 6">{{hasBind ? '解绑微信':'绑定微信'}}</a>
                <a @click="userWx(2)" v-if=" userType == 0 || userType == 5">{{'绑定销售'}}</a>
              </div>
          </div>
        </div>
      </div>
    </div>
    <qrcode :qrcode="qrcode" v-if="isBind"  @listenToChild="isBind=false"></qrcode>
  </div>
</template>

<script>
  import {getData} from "../../utils/axios";
  //二维码图
  import qrcode from "@/views/system/user/qrcode";
  import {removeCode,bindCode} from "@/api/data/user";
  import {restUrl} from '../../../url.js'
  import axios from 'axios'
  import {getToken} from "@/utils/auth";
  export default {
    components: {qrcode},
    data() {
      return {
        userInfo:'',
        wareHouse:'',
        isClose:false,
        type:2,
        isBind:false,
        isQrcode:'',
        userType:'',
        hasBind:false,
        qrcode:'',
        userId:'',
      }
    },
    mounted() {
      if (!localStorage.getItem('water_user')){
        this.dropOut();
      }else {
        let info = localStorage.getItem('water_user')
        this.userInfo = info?JSON.parse(info).loginUser:'';
        this.userType = this.userInfo.type;
        this.hasBind = this.userInfo.wxOpenId;
        this.userId = this.userInfo.id
      }
      if (localStorage.getItem('warehouse_select')){
        this.wareHouse = JSON.parse(localStorage.getItem('warehouse_select'));
      }
    },
    methods: {
      dropOut(){
        getData('/sys/user/logout', 'post').then(res => {
          this.clearAll();
        });
      },
      //解绑/绑定微信
      userWx(bindType) {
        let that = this;
        if(bindType == 2) {
          that.getCode(1);
        }
        else {
          if(that.hasBind) {
            //已经绑定，需解绑
            that.$confirm('确定解绑的微信账号?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              removeCode().then(res => {
              }).catch((e) => {
                that.loading = false;
              });
            }).catch(() => {
            });
          }
          else {
              that.getCode(2);
            }
          }
      },

      getCode(state){
        let that = this;
        let token = getToken();
        if(!token) {
          return;
        }
        axios.defaults.headers.common['token'] = token;
        axios.get(restUrl + `/sys/user/createUserQRCode?state=${state}&userId=` + this.userId, {responseType: "arraybuffer"}).then(res => {
          if (res.status === 200) {
            //转成64
            return 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
          }
        }).then(function (data) {
          //接收转换后的Base64图片
          that.qrcode = data;
          that.loading = false;
          // 设置图片地址
          that.isBind = true;
        })
      },

      formatTime(time) {
        let dateee = new Date(time).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      },

      clearAll(){
        localStorage.clear();
        this.$router.push('/');
      },

      getChildValue(e){
        this.isClose = e.show;
      }
    }
  }
</script>

<style scoped>

  .page_head {
    position: fixed;
    left: 214px;
    right: 0;
    top: 0;
    height: 60px;
    /*border-bottom: 1px solid #F0F2F5;*/
    padding: 0 30px 0 20px;
    box-sizing: border-box;
    background-color:#526abb;
    z-index: 1000;
  }

  .head_box {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .set_border {
    border-left: 1px solid #F0F2F5;
  }

  .to_close {
    left: 60px;
  }

  .search {
    display: flex;
    align-items: center;
  }

  .user_info {
    display: flex;
    align-items: center;
    color: #fff;
  }
  .user_info img{
    width: 35px;
    height: 35px;
    margin-right: 10px;
    border-radius: 100%;
    border: 1px solid #f3f3f3;
    object-fit: cover;
  }

  .set{
    position: relative;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
  }


  .out_box {
    display: flex;
    align-items: center;
  }

  .out_box a{
    line-height: 40px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    text-align: center;
  }

  .out_box .set_tip {
    padding-left: 5px;
    margin-left: 4px;
  }

  .out_box .set_tip::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    height: 20px;
    width: 1px;
    background: #bbb;
  }

  .set_tip {
    position: relative;
  }

  .set_tip:hover div{
    display:block;
  }

  .set_tip div{
    margin-top: 20px;
    display: none;
    position: absolute;
    right: -20px;
    top: 20px;
    width: 100px;
    box-shadow: 2px 2px 4px #868686;
  }

  .set_tip div a{
    display: block;
    background: #fff;
    line-height: 40px;
    color: #6687f9;
  }
  #wx {
    position: absolute;
    right: 0px;
    bottom: -40px;
  }

</style>
